<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		/*过渡版按钮*/
		#btn{
			width: 130px;
			height: 60px;
			background-color:deeppink ;
			border-radius: 10px;
			margin-left: 500px;
			margin-top: 200px;
			-webkit-perspective: 1000;
			transform-style: preserve-3d;
			font-size: 20px;
			color: #fff;
			box-shadow: 8px 8px 8px 0 rgba(0, 0, 0, 0.5);
			transition: all 0.2s;
		}
		.click{
			transform:scale(0.8);
		}


		/*动画版按钮*/
		#btn2{
			width: 130px;
			height: 60px;
			background-color:deeppink ;
			border-radius: 10px;
			margin-left: 120px;
			margin-top: 200px;
			-webkit-perspective: 1000;
			transform-style: preserve-3d;
			font-size: 20px;
			color: #fff;
			box-shadow: 8px 8px 8px 0 rgba(0, 0, 0, 0.5);
		}
		@keyframes change{
			50%{
				transform: scale(0.8);
			}
			100%{
				transform: scale(1.0);
			}
		}
		.change{
			animation: change 0.3s;
		}
	</style>
</head>
<body>
	<button id="btn">CLICK</button>
	<button id="btn2">CLICK</button>
</body>
<script type="text/javascript">
	btn.onclick = function(){
		this.classList.add("click");
		setTimeout(function(){
			btn.classList.remove("click")
		},100);
	}

	btn2.onclick = function(){
		this.classList.add("change");
		setTimeout(()=>{
			btn2.classList.remove("change");
		},400);
	}
</script>
</html>